<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>相对定位对象会占据原有位置</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	font-size: 9pt;
	line-height: 12pt;
	margin-top: 150px;
	margin-left: 150px;
}

.box1 {
	background-color: #3CF;
	height: 200px;
	width: 200px;
}

.box2 {
	background-color: #6C6;
	height: 100px;
	width: 100px;
	position: relative;
	float: left;
	top: -120px;
}
-->
</style>
</head>

<body>
	<div class="box1">
		<div class="box2">are you ok?</div>
		[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。

		<!-- 		<div class="box2"></div> -->
	</div>



</body>
</html>






